<template>
    <div class="disputeList">
        <div class="table-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>争议管理</el-breadcrumb-item>
                <el-breadcrumb-item>争议列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="searchBox">
            <!-- <div>
                申诉状态 
                <el-select style="margin-left:10px;" v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select> 
            </div> -->
            卖场：
            <el-select
              v-model="marketId"
              clearable
              @change="selectMarket"
              filterable
              placeholder="请选择卖场"
            >
              <el-option
                v-for="item in marketList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <div class="search" style="margin-left:20px;">
                <el-input type="text" v-model="keyword" placeholder="请输入排序信息" clearable></el-input>
                <el-button type="primary" size="small">搜索</el-button>
            </div>
        </div>
        <div class="table-content">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="设计单" name="1"></el-tab-pane>
                <el-tab-pane label="施工单" name="2"></el-tab-pane>
            </el-tabs>
            <el-table
                border
                empty-text="当前数据空空如也"
                ref="multipleTable"
                :data="dataList"
                tooltip-effect="dark"
                style="width: 100%"
                @select="selectedRow"
                @select-all="selectedAll"
            >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="50"></el-table-column>
                <el-table-column prop="order_no" label="订单号" width="100"></el-table-column>
                <!-- <el-table-column v-if="activeName=='1'" prop="partner_name" label="设计师" width="auto"></el-table-column>
                <el-table-column v-else prop="partner_name" label="施工队" width="auto"></el-table-column> -->
                <el-table-column prop="partner_name" label="合作方名称" width="auto"></el-table-column>
                <el-table-column prop="partner_phone" label="合作方电话" width="auto"></el-table-column>
                <!-- <el-table-column prop="partner_type" label="合作方类型" width="auto" :formatter="changeType"></el-table-column> -->
                <el-table-column prop="appeal_type" label="申诉类型" width="auto"></el-table-column>
                <el-table-column prop="order_amount" label="订单金额" width="auto"></el-table-column>
                <el-table-column prop="order_status" label="订单状态" width="auto" :formatter="changeStatus"></el-table-column>
                <el-table-column prop="client_name" label="客户名称" width="auto"></el-table-column>
                <el-table-column prop="client_phone" label="客户电话" width="auto"></el-table-column>
                <el-table-column prop="appeal_desc" label="申述描述" width="auto"></el-table-column>
                <el-table-column prop="status" label="申诉状态" width="auto">
                    <template slot-scope="scope">
                        <div>{{scope.row.status==0?'待处理':scope.row.status==1?'已处理':scope.row.status==2?'撤回':''}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="申请时间" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.create_time">{{$moment(scope.row.create_time*1000).format('yyyy-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="handle_time" label="处理时间" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.handle_time">{{$moment(scope.row.handle_time*1000).format('yyyy-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="recall_time" label="撤回时间" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.recall_time">{{$moment(scope.row.recall_time*1000).format('yyyy-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_platform" label="平台介入" width="auto">
                    <template slot-scope="scope">
                        <div>{{scope.row.is_platform==0?'否':scope.row.is_platform==1?'是':''}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="interpose_time" label="介入时间" width="auto">
                    <template slot-scope="scope">
                        <div v-if="scope.row.interpose_time">{{$moment(scope.row.interpose_time*1000).format('yyyy-MM-DD HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop='market_name' label='所属卖场' width='auto'></el-table-column>
                <el-table-column label="操作" fixed="right">
                    <template slot-scope="scope">
                        <el-button slot="reference" @click="toEdit(scope.$index, scope.row)" type="primary" size="mini">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page-nav">
                <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            options:[{
                name:'全部',
                value:''
            },{
                name:'待处理',
                value:'待处理'
            },{
                name:'已处理',
                value:'已处理'
            }],
            value:'',
            activeName:'1',
            dataList:[],
            keyword:'',
            page:1,
            pagesize:10,
            total:0,
            marketList:[], //卖场列表
            marketId:'', //已选卖场id
        }
    },
    mounted() {
        this.getList()
        this.remoteMethod()
    },
    methods: {
        // 获取卖场列表
        remoteMethod() {
          this.$http.post("/api/root/Market/marketList").then((res) => {
            console.log(res, "卖场列表");
            if (res.code == 1) {
              this.marketList = res.data ? res.data : [];
            }
          });
        },
        // 选择卖场
        selectMarket() {
          this.page = 1
          this.pagesize = 10
          this.getList();
        },

        // 切换tabs
        handleClick(e){
            this.page = 1
            this.pagesize = 10
            this.getList()
        },

        // 获取申诉列表
        getList(){
            let params = {
                keyword:this.keyword,
                page:this.page,
                pagesize:this.pagesize,
                market_id:this.marketId
            }
            let url = this.activeName==1?'/api/root/DesignerOrderAppeal/index':'/api/root/BuilderTeamOrderAppeal/index';
            this.$http.post(url,params).then(res=>{
                console.log(res,'申诉列表');
                if(res.code==1){
                    this.dataList = res.data.list?res.data.list:[]
                    this.total = res.data.total
                }
            })
        },

        // 0已取消,1待接单,2待处理,3待支付,4交付中,5已完成,6已关闭
        // 状态转换
        changeStatus(row, column, cellValue, index){
            if(cellValue==0){
                return '已取消'
            }else if(cellValue==1){
                return '待接单'
            }else if(cellValue==2){
                return '待处理'
            }else if(cellValue==3){
                return '待支付'
            }else if(cellValue==4){
                return '交付中'
            }else if(cellValue==5){
                return '已完成'
            }else if(cellValue==6){
                return '已关闭'
            }else{
                return ''
            }
        },

        // 合作方类型转换
        changeType(row, column, cellValue, index){
            if(cellValue==1){
                if(this.activeName=='1'){
                    return '设计师'
                }else{
                    return '施工队'
                }
            }else if(cellValue==2){
                return '装修公司'
            }else{
                return ''
            }
        },

        // 详情按钮
        toEdit(index,row){
            this.$router.push({name:'disputeDetail',query:{id:row.id,type:this.activeName}})
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.page = 1;
            this.getList()
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getList()
        },

    },
}
</script>
<style lang="less">
@import 'list.less';
</style>

